<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>数据绑定</title>
</head>
<body>
    <div id="root">
        <!--
            1.单向数据绑定(v-bind)：数据只能从data流向页面
            2.双向数据绑定(v-model)：数据不仅能从data流向页面，还能从页面流向data
            3.注意：
                v-model:value=''可以简写v-model='',
                默认绑定value属性值，因为只有输入类的元素才有value属性
         -->
        <!-- 
            单向数据绑定(v-bind)：<input type="text" v-bind:value='msg'>
            <br><br>
            双向数据绑定(v-model)：<input type="text" v-model:value='msg'>
         -->
        单向数据绑定(v-bind)：<input type="text" :value='msg'>
        <br><br>
        双向数据绑定(v-model)：<input type="text" v-model='msg'>
    </div>

    <script>
        new Vue({
            el:"#root",
            data:{
                msg:'iwat'
            }
        });
    </script>
</body>
</html>